<template>
  <el-card shadow="never" class="card-box">
    <el-form :model="queryForm" label-width="80px">
      <el-row :gutter="20">
      </el-row>
      <el-row :gutter="20">
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="搜索">
            <el-input v-model="queryForm.keyword" @keyup.enter="onSearch" clearable placeholder="请输入标题或内容"/>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="发布状态">
            <el-select
                v-model="queryForm.releaseStatus"
                value-key="id"
                clearable
                @clear="onType"
                placeholder="请选择发布状态"
                style="width: 240px"
            >
              <el-option
                  v-for="item in releaseStatusList"
                  :key="item.code"
                  :label="item.message"
                  :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label-width="0">
            <el-button type="primary" @click="onSearch">
              <el-icon>
                <ele-search/>
              </el-icon>
              <span class="search-btn__left">查询</span>
            </el-button>
            <el-button @click="onReset">
              <el-icon>
                <ele-refresh/>
              </el-icon>
              <span class="search-btn__left">重置</span>
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!--    <div v-auth="'crawler:data:add'" class="table-btn-box mb10">-->
    <!--      <el-button type="primary" @click="openDialog()">-->
    <!--        <el-icon class="mr5">-->
    <!--          <ele-circle-plus/>-->
    <!--        </el-icon>-->
    <!--        新 增-->
    <!--      </el-button>-->
    <!--    </div>-->
    <el-table v-loading="tableLoading.status" :data="tableData.data" border row-key="id">
      <el-table-column prop="_tableIndex" label="序号" align="center" width="50px"/>
      <el-table-column prop="url" label="官网地址" align="center" show-overflow-tooltip/>
      <el-table-column prop="title" label="标题" align="center" show-overflow-tooltip/>
      <el-table-column property="imgUrl" align="center" label="图片">
        <template #default="scope">
          <el-image v-if="scope.row.imgUrl" default="scope"
                    style="width: 50px; height: 50px"
                    :src="scope.row.imgUrl"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[scope.row.imgUrl]"
                    :initial-index="1"
                    :hide-on-click-modal="true"
                    :preview-teleported="true"
                    fit="cover"
          />
        </template>
      </el-table-column>

      <el-table-column label="文章内容" align="center">
        <template #default="scope">
          <div v-html="scope.row.articleContent" style="height: 50px"></div>
        </template>
      </el-table-column>
      <el-table-column label="发布状态" align="center">
        <template #default="scope">
          <div>
            <el-tag v-text="scope.row.releaseStatus === 'HAVE_RELEASE'? '已发布' : '未发布'"
                    :type="scope.row.releaseStatus === 'HAVE_RELEASE'? 'info' : 'success'"></el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="urlDetail" label="文章地址详情" align="center" show-overflow-tooltip/>
      <el-table-column prop="createTime" label="创建时间" align="center" min-width="100"/>
      <el-table-column label="操作" fixed="right" align="center" min-width="116">
        <template #default="scope">
          <el-button v-auth="'crawler:data:update'" link
                     type="primary" @click="openGet(scope.row.id)">
            <el-icon>
              <ele-position/>
            </el-icon>
            查看详情
          </el-button>
          <el-button v-show="scope.row.releaseStatus !== 'HAVE_RELEASE'" v-auth="'crawler:data:update'" link
                     type="primary" @click="openReleaseDialog(scope.row.id)">
            <el-icon>
              <ele-position/>
            </el-icon>
            发布
          </el-button>
          <el-button v-auth="'crawler:data:update'" link type="primary" @click="openTranslationDialog(scope.row.id)">
            <el-icon>
              <ele-chat-square/>
            </el-icon>
            翻译
          </el-button>
          <el-button v-auth="'crawler:data:update'" link type="primary" @click="openDialog(scope.row.id)">
            <el-icon>
              <ele-edit/>
            </el-icon>
            修改
          </el-button>
          <el-button v-auth="'crawler:data:delete'" link type="primary" @click="delTable(scope.row.id)">
            <el-icon>
              <ele-delete/>
            </el-icon>
            删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <CustomPagination v-model:currentPage="pagination.pageIndex" v-model:pageSize="pagination.pageSize"
                      :total="pagination.total" @changePage="changePage"/>

    <TableForm ref="tableDialogRef" @refresh="getTableList"/>
    <ReleaseForm ref="releaseDialogRef" @refresh="getTableList"/>
    <translationSelect ref="translationDialogRef" @refresh="getTableList"/>

      <el-drawer v-model="drawer" title="I am the title" :with-header="false" size="70%">
        <div>
          <el-descriptions title="详情">
            <el-descriptions-item label="原文">
              <div style="margin-top: 10px; margin-right: 10px; margin-left: 10px">
                <div>
                  <el-input type="textarea" v-model="getForm.title" maxlength="2048" disabled placeholder="请输入标题"/>
                </div>
                <div v-html="getForm.articleContent">
                </div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="中文" v-if="getForm.titleZhCN">
              <div style="margin-top: 10px; margin-right: 10px; margin-left: 10px;">
                <div>
                  <el-input type="textarea" v-model="getForm.titleZhCN" maxlength="2048" disabled
                            placeholder="请输入网页地址"/>
                </div>
                <div v-html="getForm.articleContentZhCN">
                </div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="英文" v-if="getForm.titleEnUS">
              <div style="margin-top: 10px; margin-right: 10px; margin-left: 10px">
                <div>
                  <el-input type="textarea" v-model="getForm.titleEnUS" maxlength="2048" disabled
                            placeholder="请输入网页地址"/>
                </div>
                <div v-html="getForm.articleContentEnUS">
                </div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-drawer>
  </el-card>
</template>
<script lang="ts" setup>
import {deleteCrawlerData, getCrawlerData, getCrawlerDataPage} from "@/api/app/crawlerData";
import {ElMessage, ElMessageBox} from 'element-plus'
import TableForm from './form.vue'
import ReleaseForm from './releaseForm.vue'
import translationSelect from './translationSelect.vue'
import {calcTableIndex} from "@/utils/util";

/** 查询参数 **/
let queryForm: any = ref({
  keyword: null,
  releaseStatus: null
});

const onType = () => {
  queryForm.value.releaseStatus = null;
}

const releaseStatusList = ref([
  {"code": "NOT_RELEASE", "message": "未发布"},
  {"code": "HAVE_RELEASE", "message": "已发布"},
])

const drawer = ref(false)

const tableLoading = ref({
  status: false
})

let getForm = ref({
  title: '',
  titleZhCN: '',
  titleEnUS: '',
  articleContent: '',
  articleContentZhCN: '',
  articleContentEnUS: ''
})
// 点击查看详情
const openGet = (id: any) => {
  drawer.value = true;
  getDetails(id);
}

// 查询
const onSearch = () => {
  pagination.pageIndex = 1;
  getTableList();
}
// 重置
const onReset = () => {
  queryForm.value = {}
  pagination.pageIndex = 1;
  getTableList();
}

/** 分页*/
// 分页数据
const pagination = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0
})
// 翻页
const changePage = (page: number) => {
  pagination.pageIndex = page;
  getTableList();
}


/** 表格*/
// 表格数据
const tableData = reactive({
  data: [],
})
// 获取表格列表
const getTableList = () => {
  tableLoading.value.status = true;
  getCrawlerDataPage({...pagination, ...queryForm.value}).then(res => {
    tableData.data = calcTableIndex(res, pagination);
    pagination.total = res.total;
    tableLoading.value.status = false;
  })
}
// 删除
const delTable = (id: string) => {
  ElMessageBox.confirm(
      '是否确认删除本条数据？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        deleteCrawlerData(id).then(() => {
          ElMessage.success('删除成功');
          getTableList();
        })
      }).catch(() => {
  })
}

/** 添加，编辑*/
const tableDialogRef = ref()
// 打开弹框
const openDialog = async (id: string) => {
  await tableDialogRef.value.openDialog(id);
}

const releaseDialogRef = ref()
// 打开弹框
const openReleaseDialog = async (id: string) => {
  await releaseDialogRef.value.openReleaseDialog(id);
}

const translationDialogRef = ref()
// 打开弹框
const openTranslationDialog = async (id: string) => {
  await translationDialogRef.value.openTranslationDialog(id);
}


// 获取详情
const getDetails = (id: string) => {
  getCrawlerData(id).then(res => {
    getForm.value = Object.assign({}, getForm.value, res);
  })
}
getTableList();
</script>
<style scoped>
  ::v-deep .el-descriptions__table tr {
    display: flex;
  }
</style>
